<script>// 1.下拉菜单切换
    function toggleDropdown() {
    var dropdown = document.getElementById("myDropdown");
    if (dropdown.style.display === "block") {
         dropdown.style.display = "none";
    } 
    else {
        dropdown.style.display = "block";
    }
}
    // 点击下拉菜单外部时关闭菜单
    window.onclick = function(event) {
    if (!event.target.matches('.text span')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.style.display === "block") {
                openDropdown.style.display = "none";
            }
        }
    }
}
        </script>

<script>//2.选项卡切换
        var tab = document.querySelector('.ljytab');
        var tt = tab.querySelector('.t-title');
        var spans = tt.querySelectorAll('span');//5个对象
        var tcs = tab.querySelectorAll('.tc');//5个对象
        for(var i = 0; i < spans.length; i++){
            spans[i].index = i;
            spans[i].onmouseover = function(){
            for(var j = 0; j < tcs.length; j++){
                tcs[j].style.display = 'none';
                spans[j].className = '';
            }
            tcs[this.index].style.display = 'block';
            this.className = 'cur';
            }
        }
</script>

<script>// 3.点击按钮时切换内容
    function toggleContent(contentId) {
        // 隐藏所有内容区域
        var contents = document.getElementsByClassName('content');
        for (var i = 0; i < contents.length; i++) {
            contents[i].style.display = 'none';
        }
        // 显示被点击的内容区域
        var contentToShow = document.getElementById(contentId);
        contentToShow.style.display = 'block';
    }
    // 默认显示第一个内容区域
    document.addEventListener('DOMContentLoaded', function() {
        toggleContent('imageContent');
});
</script>

<script>// 4.点击卡片时显示模态框
  // 为每个card-box添加点击事件监听器
  document.querySelectorAll('.card-box').forEach(function(cardBox) {
      cardBox.addEventListener('click', function() {
          // 获取模态框内容区域的ID
          var targetModalContent = this.id.replace('modal-card-box', 'modal-content');          
          // 显示模态框
          document.getElementById('modal-container').style.display = 'block';
          // 填充模态框内容
          document.getElementById(targetModalContent).innerHTML = '<p>模态框内容</p>'; // 这里应该根据实际情况填充内容
      });
  });
  // 获取模态框
  var modal = document.getElementById("modal-container");
  // 获取关闭模态框的<span>元素
  var span = document.getElementsByClassName("close")[0];
  // 当点击<span> (x) 时关闭模态框
  span.onclick = function() {
    modal.style.display = "none";
  }
  // 当点击模态框外部时关闭模态框
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
</script>

<script>// 5.点击导航项时切换内容区域
    document.querySelectorAll('.nav').forEach(function(navItem) {
    navItem.addEventListener('click', function() {
        document.querySelectorAll('.nav').forEach(function(item) {
            item.classList.remove('active');
        });
        // 添加激活状态到当前点击的导航项
        this.classList.add('active');
        // 获取目标内容区域的ID
        var target = this.getAttribute('data-target');
        // 隐藏所有内容区域
        document.querySelectorAll('.content').forEach(function(content) {
            content.style.display = 'none';
        });
        // 显示对应的内容区域
        document.getElementById(target).style.display = 'block';
    });
});
</script>

<script>// 6.登录注册滑动切换
    document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const ljycontainer = document.getElementById('ljycontainer');

    signUpButton.addEventListener('click', () => {
        ljycontainer.classList.add("right-panel-active");
  });

    signInButton.addEventListener('click', () => {
        ljycontainer.classList.remove("right-panel-active");
  });
});